import React, { Component } from 'react';
import {
  Text,
  View,
  Image,
  StyleSheet,
  Keyboard,
  NativeModules,
} from 'react-native';
import { adapt } from '~/utils/ScreenAdapter';
import { DefaultStyles } from '~/styles/GlobalStyles';
import AsyncStorage from '@react-native-community/async-storage';

import { fakeAccountLogin } from '../../api/Login';
import {
  YiInput,
  YiButton,
  Loading,
  DismissKeyboard,
  Toast,
  NavBar,
} from '~/components';
class IntroPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mobile: '',
      password: '',
    };
  }
  async componentDidMount() {}

  submit = async () => {
    Keyboard.dismiss();
    const { mobile, password } = this.state;
    if (mobile !== 'admin') {
      if (!mobile || !password) {
        this.showToast('用户名或密码不能为空');
        return false;
      }
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (!reg.test(mobile)) {
        this.showToast('请填写正确的邮箱格式！');
        return false;
      }
    }
    try {
      let res = await fakeAccountLogin({
        loginName: mobile === 'admin' ? 'wangjia@vv.cn' : mobile,
        password: password || 'wangJIA234884',
        organizeType: 1,
      });
      console.log('登录返回信息', res);
      Loading.hide();
      if (res.code === 10000) {
        await AsyncStorage.setItem('Authorization', res.data.token);
        this.showToast('登录成功');
        setTimeout(() => {
          // NativeModules.ReactLoginModule.loginSuccess(res.data.token);
          this.props.navigation.replace('HomePage');
        }, 2000);
      } else if (res.code === 20001 || res.code === 20004) {
        this.showToast('用户名或密码错误');
      } else if (res.code === 20002) {
        this.showToast('该账号被管理员禁用，请联系管理员！');
      } else if (res.code === 20010) {
        this.showToast('验证码错误');
      } else {
        this.showToast('用户名或密码错误');
      }
    } catch (e) {
      Loading.hide();
      console.log('登录错误日志', e);
    }
    // setTimeout(() => , 3000);
  };
  showToast = (msg) => {
    if (NativeModules.ReactLoginModule) {
      NativeModules.ReactLoginModule.showToast(msg);
    } else {
      Toast.info(msg);
    }
  };
  render() {
    const { mobile, password } = this.state;
    return (
      <DismissKeyboard>
        <View style={{ flex: 1 }}>
          <NavBar title="登录" hideLeftIcon={true} />
          <View style={{ flex: 1, paddingHorizontal: adapt(24) }}>
            <View style={styles.login_hd}>
              <Image
                source={require('../../assets/icon/icon-share-wexin.png')}
                style={styles.logo}
              />
              <Text style={styles.appname}>VV GMS</Text>
            </View>
            <View style={{ marginTop: adapt(30) }}>
              <YiInput
                placeholder="请输入账号"
                keyboardType="email-address"
                clearButtonMode="while-editing"
                returnKeyType="done"
                value={mobile}
                onChangeText={(mobile) => this.setState({ mobile })}
              />
              <YiInput
                placeholder="请输入密码"
                clearButtonMode="while-editing"
                secureTextEntry={true}
                returnKeyType="done"
                value={password}
                onChangeText={(password) => this.setState({ password })}
              />
              <View style={{ marginTop: adapt(12), marginBottom: adapt(24) }}>
                <Text
                  style={styles.forget}
                  onPress={() => {
                    // this.setState({ mobile: '', password: '' }, () =>
                    //   navigate('ResetPassword')
                    // )
                  }}
                >
                  忘记密码
                </Text>
              </View>
              <YiButton
                title="立即登录"
                style={{ marginBottom: adapt(16) }}
                onPress={this.submit}
              />
              <YiButton
                title="立即注册"
                type="pure"
                onPress={() => {
                  // this.setState({ mobile: '', password: '' }, () =>
                  //     navigate('Register')
                  // )
                }}
              />
            </View>
          </View>
        </View>
      </DismissKeyboard>
    );
  }
}
const styles = StyleSheet.create({
  login_hd: {
    paddingTop: adapt(37),
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  logo: {
    width: adapt(84),
    height: adapt(84),
    marginBottom: adapt(8),
  },
  appname: {
    width: '100%',
    textAlign: 'center',
    fontSize: 18,
    color: DefaultStyles.Black84,
    ...DefaultStyles.Medium,
  },
  forget: {
    // textAlign: 'right',
    color: DefaultStyles.Black32,
    fontSize: 14,
    ...DefaultStyles.Regular,
    position: 'absolute',
    right: 0,
  },
});

export default IntroPage;
